{# Heredando la plantilla principal #}

{% extends 'default.html' %}
{% use 'navegacion.html' %}
{% use 'loginUsuario.html' %}

{% block contenidos %}
<section style="margin-top:50px">
	<div class="hero-unit">
	  	<h1>Nuevo Familiar</h1>
	  	<legend>Datos del titular </legend>
		<legend> C.U.I.L.: {{ titular.cuil }}<br> Apellido y Nombre: {{ titular.apellido }}, {{ titular.nombre }} </legend>
	 </div>
	 <div class="hero-unit">
	  <form class="nuevoFamiliar" id="nuevoFamiliar" method="post" action="grabanuevoFamiliar.php?cuil={{ titular.cuil }}">
		  <fieldset>		
			<legend>Datos del Familiar </legend>
			<p>
			  <label for="apellido">Apellido</label>
			  <span></span>
			  <input name="apellido" type="text" id="apellido" class="{required:true, maxlength: 50, minlength: 4} span4"/>
			</p>
			<p>
			  <label for="nombre">Nombre</label>
			  <span></span>
			  <input name="nombre" type="text" id="nombre" class="{required:true, maxlength: 50, minlength: 4} span4"/>
			</p>
			<p>
			 <label for="codpar">Parentesco</label>
			 <span></span>
			 <select id="codpar" name="codpar" class="input-xlarge {required:true}">	
				{% for codpar in parentescos %}
						<option value="{{ codpar.codigo }}">{{ codpar.descri }}</option>
				{% endfor %}			
			  </select>
			</p>
			<p>
				<label for="sexo">Sexo</label>
				<span></span>
					<label class="radio"><input type="radio" name="sexo" id="maculino" value="MASCULINO" checked> MASCULINO </label>
					<label class="radio"><input type="radio" name="sexo" id="femenino" value="FEMENINO"> FEMENINO </label>
			</p>
			<p>
			  <label for="nacimiento">Fecha de Nacimiento</label>
			  <span></span>
			  <input id="nacimiento" type="text" name="nacimiento" placeholder="(DD/MM/AAAA)"/>
			</p>
			<p>
			  <label for="ingreso">Fecha de Ingreso</label>
			  <span></span>
			  <input id="ingreso" type="text" name="ingreso" placeholder="(DD/MM/AAAA)"/>
			</p>
			<label for="tipdoc">Tipo de Documento</label>
			<span></span>
				<select id="tipdoc" name="tipdoc" class="input-xlarge {required:true}">	
				{% for tipoDocu in tiposDocu %}
						<option value="{{ tipoDocu.codigo }}">{{ tipoDocu.descri }}</option>
				{% endfor %}			
				</select>
			</p>
			<p>
			  <label for="numdoc">N&uacute;mero de Documento</label>
			  <span></span>
			  <input name="numdoc" type="text" id="numdoc" class="{number:true, required:true, maxlength: 9}"/>
			</p>
			<p>
			<label for="sexo">Beneficiario Seguro de Vida</label>
				<span></span>
				<label class="radio"><input type="radio" name="activo" id="si" value="SI" checked> SI </label>
				<label class="radio"><input type="radio" name="activo" id="no" value="NO"> NO </label>
			</p>
			<p>
				<button id="guardar" name="guardar" type="submit" class="btn btn-primary">Guardar</button>
			</p>
		  </fieldset>
	</form>
	</div>
</section>

{% endblock %}


{% block javaScripts %}
	<script type="text/javascript" src="lib/js/jquery-validation-1.10.0/jquery.metadata.js"></script>
	<script type="text/javascript" src="lib/js/jquery-validation-1.10.0/jquery.validate.min.js"></script>
	<script type="text/javascript" src="lib/js/jquery-validation-1.10.0/localization/messages_es.js"></script>
	<script type="text/javascript" src="lib/js/funcionControl.js"></script>
	<script>
		
		$.validator.addMethod("esfechavalida", esFechaValida);
		$.validator.addMethod("esfechapasada", esFechaPasada);

		$(function(){
			//Valido el formulario de edicion de empresa
			$('#nuevoFamiliar').validate({
				rules: {
            		ingreso: { esfechavalida: true, required: true,  esfechapasada: true},
					nacimiento: { esfechavalida: true, required: true,  esfechapasada: true}
        		},
				messages: {
            		ingreso: 'Introduzca una fecha valida y no futura',
					nacimiento: 'Introduzca una fecha valida y no futura'
        		},
				
				submitHandler: function(){
					form.submit();  
				},
				errorPlacement: function(error, element){
					error.appendTo(element.prev("span").append());
				}
			});
		});
	</script>
{% endblock %}	